<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="public/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/blue.css">
    <link rel="stylesheet" href="css/frame.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">

        /* tooltip */
        #tooltip{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:2px;
            display:none;
            color:#fff;
        }

    </style>
<body>

<fieldset class="layui-elem-field site-demo-button" style="margin: 30px 0 0 30px;border:0">
    <button class="layui-btn layui-btn-sm layui-btn-radius" id="ability-btn">添加微服务</button>
</fieldset>

<hr class="layui-bg-gray">
<table class="layui-hide" id="test"></table>

<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="state" disabled="" value="{{d.state}}" lay-skin="switch" lay-text="运行|停止" lay-filter="status" {{ d.state == 'on' ? 'checked' : '' }}>
</script>

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>

<script type="text/html" id="instanceTpl">
    <a href="javascript:;" data-id="{{ d.serviceName }}" class="layui-table-link" name="instance-btn" >{{ d.insSummary }}</a>
</script>
<div style="padding:0 20px;"></div>


<script src="public/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/loader.js" charset="utf-8"></script>

<table class="layui-table" lay-data="{even:'true', page: { layout: ['prev', 'page', 'next', 'skip','count'] }, id:'serviceList'}" lay-filter="serviceList">
    <thead>
    <tr>
        <th lay-data="{type:'numbers'}"></th>
        <th lay-data="{field:'serviceName', width:180}">服务编码</th>
        <th lay-data="{field:'description', minWidth:200}">服务描述</th>
        <th lay-data="{field:'insSummary', align:'center',width:160, templet: '#instanceTpl'}">实例(活动／总数)</th>
        <th lay-data="{field:'qps',align:'center', width:100}">qps</th>
        <th lay-data="{field:'avg',align:'center', width:100}">avg</th>
        <th lay-data="{field:'req',align:'center', width:100}">req</th>
        <!--<th lay-data="{field:'state', width:80, templet: '#switchTpl'}">状态</th>-->
        <th lay-data="{width:178, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs oka-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs oka-btn-radius" lay-event="del">删除</a>
</script>
<script>
    /*
    var message;
    layui.config({
        base: '/js/',
        version: '1.0.1'
    }).use(['app', 'message', "oka"], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
    */
</script>
<script type="text/javascript">

</script>
<script type="text/javascript">


    layui.use(['layer','table','oka'], function(){
        var layer = layui.layer
            ,table = layui.table;

        /*
        $('#machine-btn').click(function(){
            layer.open({
                type:2,
                title:"管理机器",
                content:["machine.html", 'yes'],
                area: ['580px', '372px'],
                end:function(){
                    //location.reload();
                    //lay-data
                }
            });
        });
        */

        oka.loading.open();
        table.reload("serviceList", {
                url: "/admin/service",
                done: function(d) {
                    oka.loading.close();
                    if(oka.page.timer) {
                        window.clearInterval(oka.page.timer);
                        delete oka.page.timer;
                    }
                    function refresh() {
                        var data = table.cache.serviceList.slice();
                        for (var i = 0, l = data.length; i < l; i++) {
                            (function (i) {
                                $.ajax({
                                    url: "/monitor/service/" + data[i].serviceName
                                    , type: "GET"
                                    , dataType:"json"
                                    , async: true
                                    , success: function (res) {
                                        oka.table.refresh("serviceList",i,["qps","avg","req"]
                                            ,[res.qps,res.avg,res.req]);
                                    }
                                });
                            })(i);
                        }

                    }
                    refresh();
                    oka.page.timer = window.setInterval(fresh, 30000);
                }
            }
        );




        /*
        $.ajax({
            url: "/admin/service"
            , type: "GET"
            , dataType: "json"
            , async: true
            , success: function (res) {
                oka.loading.close();
                table.reload("serviceList", {
                    data:res.data,
                    done:function() {
                        //alert();


                    }

                })
            }
        });
        */
        $('#ability-btn').click(function(){
            layer.open({
                type:2,
                title:"添加新服务",
                content:["addService.html", 'yes'],
                area: ['450px', '300px'],
                end:function(){
                    if(oka.page.ret != undefined) {

                        var d = table.cache.serviceList.slice();
                        var ret = JSON.parse(oka.page.ret);
                        d.push(ret);

                        table.reload("serviceList")


                        delete oka.page["ret"];



                        //form.render();
                    }
                }
            });
        });
    });



</script>
<script>

    layui.use('table', function(){

        var table = layui.table
            ,form = layui.form;

       console.log(table);
        table.on('tool(serviceList)', function(obj){

            var data = obj.data,index = obj.index;
            console.log(this)
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('确认要删除这个能力？', function(index){
                    oka.loading.open();
                    $.ajax({
                        url:"/admin/service/"+data.serviceName
                        ,type:"DELETE"
                        ,async:true
                        ,success:function(res){
                            oka.loading.close();
                            if (res.code == "0") {
                                layer.msg('操作失败!!！', {
                                    offset: "t",
                                    anim: 6
                                });

                            } else {
                                layer.msg('操作成功',{
                                    time:600
                                });
                                obj.del();
                                layer.close(index);
                            }

                            obj = null;

                        }
                    });
                });
            } else if(obj.event === 'edit'){

                layer.open({
                    type:2,
                    title:"编辑服务",

                    content:["addService.html#"+data.serviceName, 'yes'],
                    area: ['450px', '300px'],
                    end:function(){
                        if(oka.page.ret != undefined) {
                            var ret = JSON.parse(oka.page.ret);
                            delete oka.page["ret"];
                            obj.update(ret);

                            /*
                            if(ret.state == "on") {
                                obj.tr[0].querySelector('[name="state"]').setAttribute("checked",true);
                            } else {
                                obj.tr[0].querySelector('[name="state"]').removeAttribute("checked");
                            }
                            */


                            form.render();
                        }

                    }
                });
                console.log(layer)
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
            return true;
        });


        //监听性别操作
        form.on('switch(sexDemo)', function(obj){

            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);

        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });
        $(document).on('click', '.layui-table>tbody>tr', function(e) {
            //console.log($(this)[0])
            if(e.target.name == "instance-btn") {

                var name = e.target.getAttribute("data-id");

                layer.open({
                    type:2,
                    title:"管理服务实例",
                    content:["addInstance.html#"+name, 'yes'],
                    area: ['800px', '480px'],
                    end:function(){
                        if(oka.page.ret != undefined) {
                            var ret = JSON.parse(oka.page.ret);
                            delete oka.page["ret"];
                            obj.update(ret);
                            console.log(ret);
                            if(ret.status == "on") {
                                obj.tr[0].querySelector('[name="status"]').setAttribute("checked",true);
                            } else {
                                obj.tr[0].querySelector('[name="status"]').removeAttribute("checked");
                            }



                            form.render();
                        }

                    }
                });
            }

        })

    });
</script>


</body></html>